<template name="me">
	<view>
		<scroll-view scroll-y class="page">
			<view class="cu-custom bg-brown" :style="[{ height: StatusBar + 'px' }]"></view>
			<view class="bg-brown" style="height:468rpx;padding-top:40rpx;overflow: hidden;" :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
				<!-- 头像 -->
				<view class="flex justify-start padding-right-sm padding-lr-sm margin-tb-xs">
						<view class="cu-avatar xl round margin-left margin-right-sm solids" :style="{ 'background-image': 'url(' + vuex_user.avatarUrl + ')' }" style="border: 2px solid #c88360;">
							<text v-if="vuex_user.id == undefined" class="cuIcon-people"></text>
						</view>
					<view class="margin-top-sm">
						<view class="flex ">
							<view v-if="vuex_user.id != undefined" style="width:auto;" class="text-bold text-cut margin-right-sm">{{ vuex_user.nickname }}</view>
							<button
								v-if="vuex_user.id == undefined"
								type="default"
								@click="login"
								open-type="getUserInfo"
								style="background-color: rgb(165,103,63);border: none;height: 100rpx;width: 150rpx;font-size: 28rpx;line-height:100rpx;color: #fff;"
							>
								登录
							</button>
						</view>

						<view class="flex align-center">
							<view v-if="vuex_user.id != undefined" class="margin-top-xs">玩家ID：{{ vuex_user.id ? vuex_user.id : '100000' }}</view>
							<view v-if="vuex_user.id != undefined" @click="$goPageIsLoginOk('/pageB/me/MyMembers')" class="cu-tag text-black text-bold text-sm sm radius margin-left-sm">
								{{ vuex_memberbalance.member == 0 ? '普通会员' : '超级会员' }}
							</view>
						</view>
					</view>
				</view>
				<!-- 积分、充值 -->
				<view class="flex justify-between padding-qwe text-center">
					<view>
						<view class="text-bold">{{ vuex_memberbalance.integration?vuex_memberbalance.integration:0 }}</view>
						<view class="text-df margin-top-xs">剧本积分</view>
					</view>
					<view>
						<view class="text-bold">{{ vuex_memberbalance.balance?vuex_memberbalance.balance:'0.00' }}</view>
						<view class="text-df margin-top-xs">余额</view>
						<view class="cu-tag text-black text-bold text-sm sm radius margin-top-xs" @click="$goPage('/pageB/me/VoucherCenter')">充值</view>
					</view>
					<view @click="shareFc()"><image class="wem" src="../../static/icon/wem.png" mode=""></image></view>
				</view>

				<view class="flex justify-between bg-black align-center margin-lr-lg padding-sm radius">
					<view class="text-bold">剧梦会员</view>
					<view class="flex justify-end">
						<view class="test-xs margin-right-sm text-grey">快来加入我们吧</view>
						<view class="cu-tag round bg-white" @click="$goPageIsLoginOk('/pageB/me/MyMembers')">会员信息</view>
					</view>
				</view>
			</view>
			<view class="cu-list grid" :class="['col-' + gridCol, gridBorder ? '' : 'no-border']">
				<view class="cu-item" @click="menuBtn(index)" v-for="(item, index) in cuIconList" :key="index" v-if="index < gridCol * 2">
					<view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.badge != 0">
							<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
						</view>
					</view>
					<text>{{ item.name }}</text>
				</view>
			</view>

			<view class="zuanshika padding">
				<view class="flex justify-between">
					<view class="flex align-center">
						<image src="../../static/icon/zuanshi.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
						<text class="text-bold text-lg margin-left-xs">钻石卡</text>
					</view>
					<view class="cu-tag round bg-brown" @click="$goPage('/pageB/me/DiamondCard/DiamondCard')">去开通</view>
				</view>
			</view>

			<!-- <view class="cu-steps margin-lr-sm">
				<view class="cu-item" :class="stepsNum>index?'text-brown':''" v-for="(item,index) in stepsList"
					:key="index">
					<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text>

					<view>{{item.name}}</view>
					<view class="text-xs text-gray margin-tb-xs">{{item.desc}}</view>
				</view>
			</view> -->

			<view class="cu-list menu margin-bottom-sm" :class="[menuBorder ? 'sm-border' : '', menuCard ? 'card-menu margin-top' : '']">
				<!-- <view class="cu-item arrow"> -->
				<view class="cu-item ">
					<view class="content" hover-class="none" @click="$goPageIsLoginOk('/pageB/me/MyAppointment')">
						<text class="cuIcon-calendar text-black"></text>
						<!-- <image src="/static/logo.png" class="png" mode="aspectFit"></image> -->
						<text class="text-black test-sm">我的预约</text>
					</view>
				</view>
				<!-- <view class="cu-item ">
					<navigator class="content" hover-class="none" url="/pageB/me/VoucherCenter"
						open-type="navigate">
						<text class="cuIcon-calendar text-black"></text>
						<text class="text-black test-sm">我的余额</text>
					</navigator>
				</view> -->
				<view class="cu-item ">
					<view class="content" hover-class="none" @click="$goPageIsLoginOk('/pageB/me/Capitaletails')">
						<text class="cuIcon-coin text-black"></text>
						<!-- <image src="/static/logo.png" class="png" mode="aspectFit"></image> -->
						<text class="text-black test-sm">我的资金明细</text>
					</view>
				</view>
				<!-- 	<view class="cu-item arrow">
					<navigator class="content" hover-class="none" url="../list/list" open-type="navigate">
						<text class="cuIcon-footprint text-black"></text>
						<text class="text-black test-sm">时间线工具</text>
					</navigator>
				</view> -->
				<view class="cu-item ">
					<view class="content" hover-class="none" @click="$goPageIsLoginOk('/pageB/me/coupon')">
						<text class="cuIcon-selection text-black"></text>
						<!-- <image src="/static/logo.png" class="png" mode="aspectFit"></image> -->
						<text class="text-black test-sm">我的优惠券</text>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content" hover-class="none" @click="$goPageIsLoginOk('/pageB/me/wantPlay')">
						<text class="cuIcon-favor text-black"></text>
						<!-- <image src="/static/logo.png" class="png" mode="aspectFit"></image> -->
						<text class="text-black test-sm">我想玩的本</text>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content" hover-class="none" @click="$goPageIsLoginOk('/pageB/me/Played')">
						<text class="cuIcon-friend text-black"></text>
						<!-- <image src="/static/logo.png" class="png" mode="aspectFit"></image> -->
						<text class="text-black test-sm">我玩过的本</text>
					</view>
				</view>
				<view class="cu-item " @click="callPhone">
					<navigator class="content" hover-class="none">
						<text class="cuIcon-service text-black"></text>
						<!-- <image src="/static/logo.png" class="png" mode="aspectFit"></image> -->
						<text class="text-black test-sm">联系我们</text>
					</navigator>
				</view>

				<view class="cu-item " @click="SubscribeMessage">
					<view class="content" hover-class="none">
						<text class="cuIcon-service text-black"></text>
						<!-- <image src="/static/logo.png" class="png" mode="aspectFit"></image> -->
						<text class="text-black test-sm">订阅消息</text>
					</view>
				</view>
			</view>

			<view class="cu-tabbar-height"></view>
		</scroll-view>
		<!-- <van-overlay :show="QRCodeShow" @click="QRCodeShow = false"></van-overlay>
		<view class="qrcode" v-if="QRCodeShow">
			<view class="wrap">
				<canvas
					canvas-id="mycanvas"
					class="myCanvas"
					style="width: 295px;height: 525px;margin: 0 auto;background-color: #fff;"
					@longtap.stop="longtap"
					
				></canvas>
				<image :src="ShareImg" mode="" v-show="false" style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		<button class="cu-btn round bg-yellow position" v-if="QRCodeShow" @click="saveShareImg">保存至相册</button> -->
		
		<!-- 图片展示由自己实现 -->
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button style="background: #0081ff; color: #FFFFFF;" type="default" size="mini" @tap.prevent.stop="saveShareImg()">保存图片</button>
				</view>
			</view>
		</view>
		<!-- 画布 -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>
		
	</view>
</template>

<script>
	import { shareMixins} from '@/common/mixins/share.js'
	import _app from '@/components/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/components/QS-SharePoster/QS-SharePoster.js';
export default {
	name: 'me',
	mixins: [shareMixins],
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,

			current: 0,
			QRCodeShow: false,
			canvasShow: true,
			gridCol: 4,
			gridBorder: false,
			menuBorder: false,
			menuCard: true,
			skin: false,
			listTouchStart: 0,
			listTouchDirection: null,

			code: '',

			// ShareImg: '',
			
			
			poster: {},
			qrShow: false,
			canvasId: 'default_PosterCanvasId'
		};
	},
	created() {
		if (this.vuex_user.id == undefined) {
			this.login();
		} else {
			this.$u.api
				.userBalanceInfo({
					userId: this.vuex_user.id
				})
				.then(res => {
					this.$u.vuex('vuex_memberbalance', res.data);
				});
		}
	},
	mounted() {},
	watch: {
		vuex_user: function(newVal, oldVal) {
			this.$u.api
				.userBalanceInfo({
					userId: this.vuex_user.id
				})
				.then(res => {
					this.$u.vuex('vuex_memberbalance', res.data);
				});
		}
	},
	methods: {
		change(event) {
			let current = event.detail.current;
			this.current = current;
		},
		menuBtn(index) {
			if (index === 1) {
				uni.openSetting({
					success(res) {
						console.log(res.authSetting);
					}
				});
			}
		},
		SubscribeMessage() {
			uni.requestSubscribeMessage({
				tmplIds: ['8IbkZdmlMoOrlgReuSRPw0_vcmjv4nDlD8w_pzlV6V0','4X66i6o2r7Q7a94YbjYjVbUcV0AFZ5NoPvB4VUVeZX4','dSkARvtgG2xTeOro_2vJ6cz6BfotbfKq6vDCpyeOL7I'],
				success:(res)=> {
					console.log(res);
					for (let key in res) {
						if(res[key]==="accept"){
							this.$successToast('订阅成功')
						}
					}
				},
				fail(res) {
					uni.showModal({
						content: '检测到您没打开通知权限，为您更好的体验，请去设置打开？',
						confirmText: '确认',
						cancelText: '取消',
						success: res => {
							if (res.confirm) {
								uni.openSetting({
									success: res => {
										
									}
								});
							} else {
								console.log('取消');
								return false;
							}
						}
					});
				}
			});
		},
		login() {
			uni.login({
				provider: 'weixin',
				success: loginRes => {
					this.code = loginRes.code;
				}
			});
			this.getuserInfo();
		},
		getuserInfo() {
			uni.getUserProfile({
				desc: '获取用户头像',
				lang: 'zh_CN',
				success: async infoRes => {
					let res = await this.$u.api.wxlogin({
						code: this.code
					});
					this.$u.vuex('vuex_token', res.data.token);

					let res1 = await this.$u.api.getUserInfo({
						openId: 'o5g3L5HyB3DVxOZCyXIevTqWi2sQ',
						sessionKey: res.data.sessionKey,
						encryptedData: infoRes.encryptedData,
						iv: infoRes.iv
					});
					this.$u.vuex('vuex_user', res1.data);
				}
			});
		},
		callPhone() {
			this.$u.api.getCustomerPhone().then(res => {
				if (res.code === 200) {
					uni.makePhoneCall({
						phoneNumber: res.data.phone
					});
				} else {
					this.$textToast(res.message);
				}
			});
		},
		
		async shareFc() {
			try {
				_app.log('准备生成:' + new Date())
				const d = await getSharePoster({
					_this: this, //若在组件中使用 必传
					type: 'testShareType',
					formData: {
						//访问接口获取背景图携带自定义数据
		
					},
					backgroundImage:'http://api.51cjj.com/jumeng_admin/uploadFile/fxiang/fenxiang.jpg',
					posterCanvasId: this.canvasId,	//canvasId
					delayTimeScale: 20, //延时系数
					/* background: {
						width: 1080,
						height: 1920,
						backgroundColor: '#666'
					}, */
					drawArray: ({
						bgObj,
						type,
						bgScale
					}) => {
						const dx = bgObj.width * 0.3;
						const fontSize = bgObj.width * 0.045;
						const lineHeight = bgObj.height * 0.04;
						//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
						return new Promise((rs, rj) => {
							rs([{
									type: 'custom',
									setDraw(Context) {
										Context.setFillStyle('black');
										Context.setGlobalAlpha(0.3);
										Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
										Context.setGlobalAlpha(1);
									}
								},
								{
									type: 'text',
									fontStyle: 'italic',
									text: this.vuex_user.nickname+'的分享',
									size: fontSize,
									color: 'white',
									alpha: .75,
									textAlign: 'left',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										_app.log('index页面的text的infocallback ，textlength:' + textLength);
										return {
											dx,
											dy: bgObj.height - bgObj.width * 0.2
										}
									},
									serialNum: 0,
									id: 'tag1'	//自定义标识
								},
								{
									type: 'text',
									text:'扫码体验',
									fontWeight: 'bold',
									size: fontSize,
									color: 'white',
									alpha: .75,
									textAlign: 'left',
									textBaseline: 'middle',
									serialNum: 1,
									allInfoCallback({	//v3.0.1 更新 可以获取drawArray中全部数据
										drawArray
									} = {}) {
										const obj = drawArray.find(item => item.id === 'tag1');
										/* return {
											dx: obj.dx,
											dy: obj.dy + lineHeight
										} */
										//也可以return promise对象
										return new Promise((rs, rj) => {
											setTimeout(() => {
												rs({
													dx: obj.dx,
													dy: obj.dy + lineHeight*2
												});
											}, 1);
										});
									}
								},
								{
									type: 'text',
									text: '剧梦小程序',
									size: fontSize,
									color: 'white',
									alpha: 1,
									textAlign: 'left',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										return {
											dx: bgObj.width - textLength - fontSize,
											dy: bgObj.height - lineHeight
										}
									}
								},
								{
									type: 'image',
									url: '/static/icon/xcxm.jpg',
									alpha: 1,
									dx:bgObj.width*0.05,
									dy: bgObj.height - bgObj.width * 0.25,

								},

							]);
						})
					},
					setCanvasWH: ({
						bgObj,
						type,
						bgScale
					}) => { // 为动态设置画布宽高的方法，
						this.poster = bgObj;
					}
				});
				_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
				this.poster.finalPath = d.poster.tempFilePath;
				this.qrShow = true;
			} catch (e) {
				_app.hideLoading();
				_app.showToast(JSON.stringify(e));
				console.log(JSON.stringify(e));
			}
		},

		hideQr() {
			this.qrShow = false;
		},
		// async canvasImage() {
		// 	this.QRCodeShow = true;

		// 	uni.showLoading({
		// 		title: '加载中',
		// 		mask: false
		// 	});
		// 	setTimeout(function() {
		// 		uni.hideLoading();
		// 	}, 1000);
		// 	let myCanvas = uni.createCanvasContext('mycanvas', this);
		// 	//背景填充
		// 	myCanvas.fillStyle = '#ffffff';
		// 	myCanvas.fillRect(0, 0, 295, 525);
		// 	//画布尺寸
		// 	// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
		// 	//图片

		// 	let bg = '';
		// 	await new Promise(async reject => {
		// 		uni.downloadFile({
		// 			url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-7294c3389163c0e79a89ff354865ea4f_r.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635149307&t=63c4a84904823ce8f7d72614509ef179', //动态的图片，网络路径
		// 			success: async res => {
		// 				bg = res.tempFilePath;
		// 				reject();
		// 			}
		// 		});
		// 	});
		// 	myCanvas.drawImage(bg, 0, 0, 295, 400);
		// 	//参数：图片，左偏移，上偏移，宽，高
		// 	//认证图标

		// 	let avatarUrl = '';
		// 	await new Promise(async reject => {
		// 		uni.downloadFile({
		// 			url: this.vuex_user.avatarUrl, //动态的图片，网络路径
		// 			success: async res => {
		// 				avatarUrl = res.tempFilePath;
		// 				reject();
		// 			}
		// 		});
		// 	});
		// 	//头像
		// 	myCanvas.save(); // 先保存状态 已便于画完圆再用
		// 	myCanvas.beginPath(); //开始绘制
		// 	//先画个圆
		// 	myCanvas.arc(40, 460, 25, 0, Math.PI * 2);
		// 	myCanvas.setFillStyle('#fff');
		// 	myCanvas.fill(); //保证图片无bug填充
		// 	myCanvas.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
		// 	myCanvas.drawImage(avatarUrl, 15, 435, 50, 50); // 推进去图片
		// 	myCanvas.restore();

		// 	myCanvas.fillStyle = '#101010';
		// 	let fontSize = 14;
		// 	myCanvas.font = `${fontSize}px Arial`; //绘制文字
		// 	myCanvas.fillText(this.vuex_user.nickname, 70, 440);

		// 	let fontSizea = 12;
		// 	myCanvas.fillStyle = '#5e5e5e';
		// 	myCanvas.font = `${fontSizea}px Arial`; //绘制文字
		// 	myCanvas.fillText('保存分享好友', 70, 480);


		// 	let ewm = '';
		// 	await new Promise(async reject => {
		// 		uni.downloadFile({
		// 			url: 'https://huangz-1304473329.cos.ap-chengdu.myqcloud.com/quzuoju/image/gh_e17d127f827f_258.jpg', //动态的图片，网络路径
		// 			success: async res => {
		// 				ewm = res.tempFilePath;
		// 				reject();
		// 			}
		// 		});
		// 	});

		// 	//二维码
		// 	myCanvas.drawImage(ewm, 180, 410, 100, 100);

		// 	//开始绘画，必须调用这一步，才会把之前的一些操作实施
		// 	myCanvas.draw(true, () => {
		// 		uni.canvasToTempFilePath(
		// 			{
		// 				canvasId: 'mycanvas',
		// 				success: res => {
		// 					// 在H5平台下，tempFilePath 为 base64
		// 					this.ShareImg = res.tempFilePath;
		// 					this.canvasShow = false;
		// 					uni.hideLoading();
		// 				},
		// 				fail: re => {
		// 					uni.showToast({
		// 						title: '生成分享图失败',
		// 						duration: 2000,
		// 						icon: 'none'
		// 					});
		// 				}
		// 			},
		// 			this
		// 		);
		// 	});
		// },
		longtap() {
			console.log('1111111111111111');
		},
		saveShareImg() {
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success: () => {
					uni.showLoading({
						title: '正在保存'
					});
					uni.saveImageToPhotosAlbum({
						filePath: this.poster.finalPath,
						success: function() {
							uni.showToast({
								title: '图片保存成功～'
							});
						},
						fail: function(e) {
							//TODO
						},
						complete: function() {
							uni.hideLoading();
						}
					});
				},
				fail: () => {
					uni.showModal({
						content: '检测到您没打开保存图片权限，为您更好的体验，请去设置打开？',
						confirmText: '确认',
						cancelText: '取消',
						success: res => {
							if (res.confirm) {
								uni.openSetting({
									success: setres => {
										console.log(setres);
										if (setres.authSetting['scope.writePhotosAlbum']) {
											this.saveShareImg();
										}
									}
								});
							} else {
								console.log('取消');
								return false;
							}
						}
					});
					return false;
				}
			});
		}
	},
	computed: {}
};
</script>

<style lang="scss" scoped>
.zuanshika {
	width: 690rpx;
	height: 110rpx;
	background-image: linear-gradient(to right, #2a2a2c, #4e5052);
	margin: 0 auto;
	border-radius: 12rpx;
	color: #f8dab0;
}
.padding-qwe {
	padding: 40rpx 90rpx;
}

.wem {
	width: 100rpx;
	height: 100rpx;
}

.page {
	height: 100vh;
}

.qrcode {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	width: 590rpx;
	height: 1050rpx;
	border-radius: 12rpx;
	background-color: rgba(0, 0, 0, 0);
	z-index: 100;
}

.fqrcode {
	z-index: -100;
}

.sqrcode {
	z-index: 100;
}

.position {
	position: fixed;
	bottom: 210rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
}

.swiper {
}

/* // swiper-item{
	// 	width: 150rpx!important;
	// } */
.wrap {
	position: relative;
	height: 100%;
	/* // .yy {
		// 	position: absolute;
		// 	top: 50%;
		// 	left: 50%;
		// 	transform: translate(-50%,-50%);
		// 	width: 50px;
		// 	height:50px;
		// 	border-radius: 50%;
		// 	z-index: 10;
		// 	box-shadow: 0 0 100px #fff;
		// 	background-color: #fff;
		// 	opacity: 0.5;
		// } */

	.crown {
		transform: scale(0.9, 0.82);
	}

	.item {
		height: 100%;
		transition: 0.6s;
		background-color: #fff;
		border-radius: 5px 5px 0 0;
		overflow: hidden;
	}

	.item-img {
		width: 100%;
		height: 80%;
	}

	.imgShadow {
		height: calc(100% - 10px);
		margin-bottom: 10px;
		box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
	}

	.crown-active {
		transform: scale(1);
	}

	.dots {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);

		.dot {
			width: 6rpx;
			height: 6rpx;
			border-radius: 50%;
			background-color: #d6d6d6;
			margin-right: 8rpx;
		}

		.curr-dot {
			height: 6rpx;
			width: 22rpx;
			border-radius: 6rpx;
			background-color: #fff;
		}
	}
}

.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
	}

	.border_radius_10px {
		border-radius: 10px;
	}

	.padding1vh {
		padding: 1vh;
	}

	.posterImage {
		width: 60vw;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}
	.blueBtn{
		width: 500rpx;
		margin: 50rpx auto;
		display: block;
		/* line-height: 80rpx; */
		line-height: 80rpx;
	}
</style>
